import React from 'react';
import { Typography, Form, Select, DatePicker, Button, Card, Input } from 'antd';

const { Title } = Typography;
const { TextArea } = Input;

const AppointmentCreate: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('预约信息:', values);
    // TODO: 提交预约请求
  };

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ background: '#fff', padding: '24px', borderRadius: '8px', maxWidth: 600 }}>
        <Title level={2} style={{ marginBottom: 24 }}>发起预约</Title>
        
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
        >
          <Form.Item
            label="选择疫苗"
            name="vaccine"
            rules={[{ required: true, message: '请选择疫苗' }]}
          >
            <Select placeholder="请选择要预约的疫苗">
              <Select.Option value="covid">新冠疫苗</Select.Option>
              <Select.Option value="flu">流感疫苗</Select.Option>
              <Select.Option value="hepatitis">乙肝疫苗</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="预约日期"
            name="date"
            rules={[{ required: true, message: '请选择预约日期' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            label="预约时间"
            name="time"
            rules={[{ required: true, message: '请选择预约时间' }]}
          >
            <Select placeholder="请选择预约时间">
              <Select.Option value="09:00">09:00</Select.Option>
              <Select.Option value="10:00">10:00</Select.Option>
              <Select.Option value="11:00">11:00</Select.Option>
              <Select.Option value="14:00">14:00</Select.Option>
              <Select.Option value="15:00">15:00</Select.Option>
              <Select.Option value="16:00">16:00</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="备注信息"
            name="notes"
          >
            <TextArea rows={4} placeholder="请输入备注信息（可选）" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" size="large">
              提交预约
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default AppointmentCreate;
